<div class="dialog">
    <div><img src="<?php echo $this->pubUrl?>share/css/map/images/dialog/head.png" width="394px" height="8px"/></div>
    <div class="body">
        <a href="javascript:void(0)" class="close" onclick="javascript:map.findShowingMarker().clearDetail();">
            <img src="<?php echo $this->pubUrl?>share/css/map/images/dialog/close.png"/>
        </a>
        <table class="line-detail">
            <tr>
                <td rowspan="9" valign="top" style="padding-right:4px">
                    <a href="<?php echo $this->getUrl(array('id'=>$this->poi->getId()), 'card', 'shop', 'customer')?>" target="_blank">
                        <img src="<?php echo $this->pubUrl?>share/css/map/images/dialog/empty.jpg" id="MediaImage" width="131" height="131"/>
                    </a>
                </td>
            </tr>
            <tr><td valign="top" style="height:20px"><?php echo $this->poi->getShopName()?></td></tr>
            <tr><td valign="top"><?php echo $this->poi->getAddress()?></td></tr>
            <tr><td valign="top"><?php echo $this->poi->getBusinessPhone()?></td></tr>
            <tr><td valign="top"><?php echo $this->poi->getBusinessScope()?></td></tr>
            <tr>
                <td align="center">
                    <ul class="media-navigate">
                        <li><a href="javascript:void(0)" class="prev prev-disabled" id="PrveMedia"></a></li>
                        <li><a href="javascript:void(0)" class="next" id="NextMedia"></a></li>
                    </ul>
                </td>
                <td>
                    <ul class="control">
                        <li>
                        <a href="<?php echo $this->getUrl(array('id'=>$this->poi->getId()), 'card', 'shop', 'customer')?>" target="_blank">详细</a>
                        </li>
                        <!--
                        <li><a href="javascript:void(0)">从这里出发</a></li>
                        <li><a href="javascript:void(0)">到这里去</a></li>
                        <li><a href="javascript:void(0)">周边</a></li>
                        <li><a href="javascript:void(0)">放大</a></li>
                        <li><a href="javascript:void(0)">纠错</a></li>
                        -->
                    </ul>
                </td>
            </tr>
        </table>
    </div>
    <div>
        <img src="<?php echo $this->pubUrl?>share/css/map/images/dialog/footer.png" width="394px" height="41px" />
    </div>
    <div id="ElementMediaContainer" style="display:none">
        <input type="hidden" id="MediaIndex" value="0" />
        <?php
            $index = 0;
            $pictures = explode(',', $this->poi->getPhoto());
            foreach ($pictures as $picture):?>
        <img mediaId="<?php echo $index + 1 ?>" src="<?php echo $this->getStorefrontPicture($this->poi->getRoadId(), $picture) ?>" title="<?php echo $this->poi->getShopName() ?>" alt="<?php echo $this->poi->getShopName() ?>"/>
        <?php
            $index++;
            endforeach;
        ?>
    </div>
</div>
<script language="javascript" type="text/javascript">
function resetMedia() {
    var imgs = $('#ElementMediaContainer img');
    $('#NextMedia').removeClass('next-disabled');
    $('#PrevMedia').addClass('next-disabled');
    if (imgs.length > 0) {
        $('#MediaIndex').val(1);
        $('#MediaImage').attr('src', $(imgs[0]).attr('src'));
    }
    if (imgs.length <= 1) {
        $('#NextMedia').addClass('next-disabled');
    }
}

$(function() {
    resetMedia();

    $('#PrveMedia').click(function() {
        if ($(this).hasClass('prve-disabled')) {
            return;
        }

        var index = $('#MediaIndex').val();
        if (index > 1) {
            index--;
            $('#MediaImage').attr('src', $($('#ElementMediaContainer img')[index - 1]).attr('src'));
            $('#NextMedia').removeClass('next-disabled');
        }
        if (index <= 1) {
            $(this).addClass('prev-disabled');
        }
        $('#MediaIndex').val(index);
    });

    $('#NextMedia').click(function() {
        if ($(this).hasClass('next-disabled')) {
            return;
        }

        var imgs = $('#ElementMediaContainer img');
        var index = $('#MediaIndex').val();
        if (index < imgs.length) {
            index++;
            $('#MediaImage').attr('src', $(imgs[index - 1]).attr('src'));
            $('#PrveMedia').removeClass('prev-disabled');
        }
        if (index >= imgs.length) {
            $(this).addClass('next-disabled');
        }
        $('#MediaIndex').val(index);
    });
});
</script>